<template>
  <div v-if="currentUser">
    <a-card title="用户信息" :bordered="false" style="width:100%;background: #ffffff;">
      <template #extra>
        <EditOutlined @click="userEditVisible=true"/>
        <a-modal
          v-model:open="userEditVisible"
          title="修改信息"
          ok-text="修改"
          cancel-text="取消"
          @ok="userEdit"
        >
          <a-form ref="formRef" layout="vertical" name="form_in_modal">
            <a-form-item label="用户名">
              <a-input v-model:value="currentUser.userName" />  
            </a-form-item>
            <a-form-item label="账号">
              <a-input v-model:value="currentUser.userAccount" />  
            </a-form-item>
            <a-form-item label="性别"> 
              <a-select v-model:value="currentUser.sex">
                <a-select-option value="1">男</a-select-option>
                <a-select-option value="0">女</a-select-option>
              </a-select>

            </a-form-item>
            <a-form-item label="个性签名">
              <a-input v-model:value="currentUser.userSign" />  
            </a-form-item>
          </a-form>
        </a-modal>
        <LogoutOutlined @click="logOut()" style="margin-left: 20px;" />
      </template>
      <a-descriptions  bordered>
        <a-descriptions-item label="头像" >
          <a-avatar :size="64" :src="currentUser.userAvatar"> 
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </a-descriptions-item>
        <a-descriptions-item label="用户名" :span="1">{{currentUser.userName}}</a-descriptions-item>
        <a-descriptions-item label="账号" :span="1">{{currentUser.userAccount}}</a-descriptions-item>
        <a-descriptions-item label="性别" :span="1">{{getSex(currentUser.sex)}} </a-descriptions-item>
        <a-descriptions-item label="个性签名" :span="4">{{currentUser.userSign}} </a-descriptions-item>
        <a-descriptions-item label="权限" :span="1">
          <a-badge status="processing" :text="isAdmin(currentUser.isAdmin)" />
        </a-descriptions-item>
        <a-descriptions-item label="其他">20.00</a-descriptions-item>
      </a-descriptions>
      
    </a-card>
  </div>
  <div v-else>
    <a-empty />
  </div>
</template>
<script setup>
import {
  EditOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue';

import { ref ,onMounted} from 'vue';
import axios from '../config/axios.ts'
import { message } from 'ant-design-vue';

const currentUser = ref()
const userEditVisible = ref(false)

onMounted(()=>{
  getLoginUser()
})

//获取当前用户
const getLoginUser =async()=>{
  const reslut = await axios.get("/user/get/login")
  currentUser.value = reslut.data.data
}

//退出登录
const logOut = async()=>{
  const result = await axios.get("/user/logout")
  if(result.data.code === 0){
    message.success("退出成功")
  }
  location.reload()
}

//修改信息
const userEdit = async()=>{
  const result = await axios.post("/user/edit",currentUser.value)
  console.log(result.data);
  if(result.data.code === 0){
    message.success("修改成功")
    location.reload()
  }else{
    message.error("修改失败")
  }
}


const isAdmin = (id)=>{
  if(id === 1){
    return '管理员'
  }else{
    return '普通用户'
  }
}

const getSex = (id)=>{
  if(id === 1){
    return '男'
  }else{
    return '女'
  }
}
</script>